<template>
    <div class="content">
        <div class="title">呀，我在哪? 将要去哪? </div>
    </div>
</template>

<script setup lang="ts">
// Component logic can go here
const componentName = 'NotFoundPage';
</script>

<style lang="less" scoped>
.content {
    text-align: center;
    height: 100vh;
    background-image: url(../assets/404.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .title {
        font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
        font-size: 58px;
        color: #6e4709;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 768px) {
    .content .title {
        font-size: 32px;
    }
}
</style>
